<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用授权</title>
    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.min.js}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background: #f6f8fa;
            color: #24292e;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .github-header {
            position: absolute;
            top: 0;
            width: 100%;
            padding: 16px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            border-bottom: 1px solid #e1e4e8;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }

        .github-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 24px;
            font-weight: 600;
            color: #24292e;
            text-decoration: none;
        }

        .github-logo i {
            color: #0366d6;
        }

        .auth-container {
            background: white;
            border: 1px solid #e1e4e8;
            border-radius: 8px;
            width: 100%;
            max-width: 440px;
            /*margin-top: 80px;*/
            overflow: hidden;
            box-shadow: 0 3px 12px rgba(0,0,0,0.05);
        }

        .auth-header {
            padding: 32px 32px 24px;
            text-align: center;
            border-bottom: 1px solid #eaecef;
        }

        .auth-header h1 {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #24292e;
        }

        .app-info {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-top: 24px;
        }

        .app-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #0366d6, #2188ff);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .app-name {
            font-size: 18px;
            font-weight: 500;
            color: #0366d6;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 24px 32px;
            background: #f6f8fa;
            border-bottom: 1px solid #eaecef;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e1e4e8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6a737d;
            overflow: hidden;
            border: 1px solid #e1e4e8;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-details {
            flex: 1;
        }

        .username {
            font-weight: 500;
            color: #24292e;
        }

        .permission-section {
            padding: 32px 32px 24px;
        }

        .permission-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
            color: #24292e;
            text-align: center;
        }

        .permission-list {
            list-style: none;
            background: #f6f8fa;
            border: 1px solid #e1e4e8;
            border-radius: 6px;
            overflow: hidden;
        }

        .permission-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid #eaecef;
        }

        .permission-item:last-child {
            border-bottom: none;
        }

        .permission-icon {
            color: #0366d6;
            margin-right: 12px;
            font-size: 16px;
            min-width: 24px;
        }

        .permission-text {
            font-size: 14px;
            color: #586069;
        }

        .permission-text strong {
            color: #24292e;
            font-weight: 500;
        }

        .action-section {
            padding: 16px 32px 32px;
            display: flex;
            gap: 16px;
        }

        .btn {
            flex: 1;
            padding: 12px 16px;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            text-align: center;
            border: 1px solid transparent;
        }

        .btn-authorize {
            background: #2ea44f;
            color: white;
            border: 1px solid #2c974b;
        }

        .btn-authorize:hover {
            background: #2c974b;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(46, 164, 79, 0.2);
        }

        .btn-cancel {
            background: white;
            color: #24292e;
            border: 1px solid #d1d5da;
        }

        .btn-cancel:hover {
            background: #f6f8fa;
            border-color: #c8cbcf;
        }

        .auth-footer {
            padding: 24px 32px;
            border-top: 1px solid #eaecef;
            font-size: 13px;
            color: #6a737d;
            text-align: center;
            background: #f6f8fa;
        }

        .auth-footer a {
            color: #0366d6;
            text-decoration: none;
        }

        .auth-footer a:hover {
            text-decoration: underline;
        }

        .scope-info {
            background: rgba(3, 102, 214, 0.05);
            border: 1px solid rgba(3, 102, 214, 0.2);
            border-radius: 6px;
            padding: 12px 16px;
            margin-top: 16px;
            font-size: 13px;
            color: #586069;
        }

        .scope-info i {
            color: #0366d6;
            margin-right: 8px;
        }

        .status-badge {
            background: #f6f8fa;
            border: 1px solid #e1e4e8;
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 12px;
            color: #2c974b;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .status-badge i {
            font-size: 12px;
        }

        .security-notice {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 20px;
            font-size: 13px;
            color: #2c974b;
        }

        @media (max-width: 480px) {
            .github-header {
                padding: 16px 20px;
            }

            .auth-container {
                margin-top: 70px;
            }

            .auth-header,
            .permission-section,
            .action-section {
                padding: 24px 20px;
            }

            .user-info {
                padding: 20px;
            }

            .action-section {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<!-- GitHub风格顶部导航 -->
<!--<div class="github-header">
    <a href="#" class="github-logo">
        <i class="fab fa-github"></i>
        GitHub
    </a>
    <div>
        <a href="#" style="color: #586069; text-decoration: none; font-size: 14px;">
            <i class="fas fa-question-circle"></i> 帮助
        </a>
    </div>
</div>-->

<!-- 授权卡片 -->
<div class="auth-container">
    <div class="auth-header">
        <h1>授权访问您的账户</h1>
        <p style="color: #586069; font-size: 14px; margin-top: 8px;">一个应用程序正在请求访问您的 AliCloud 账户</p>

        <div class="app-info">
            <div class="app-icon">
                <i class="fas fa-code"></i>
            </div>
            <div class="app-name" th:text="${clientId}"></div>
        </div>

        <div class="security-notice">
            <i class="fas fa-lock"></i>
            <span>安全连接 · 数据传输加密</span>
        </div>
    </div>

    <div class="user-info">
        <div class="avatar">
            <i class="fas fa-user"></i>
        </div>
        <div class="user-details">
            <div class="username">octocoder</div>
            <div style="font-size: 13px; color: #6a737d;">登录自 GitHub</div>
        </div>
        <div class="status-badge">
            <i class="fas fa-check-circle"></i> 已验证
        </div>
    </div>

    <form id="authorizationForm" action="/auth/oauth/authorize" method="post">
        <input type="hidden" name="user_oauth_approval" value="true">

        <div class="permission-section">
            <div class="permission-title" th:text="${clientId} + ' 将能够访问以下内容：'">DevTools Pro 将能够访问以下内容：</div>

            <ul class="permission-list">
                <!--<li class="permission-item">-->
                    <!--<i class="fas fa-code permission-icon"></i>-->
                    <!--<div class="permission-text">读取和写入您的 <strong>代码仓库</strong></div>-->
                <!--</li>-->
                <!--<li class="permission-item">-->
                    <!--<i class="fas fa-user-friends permission-icon"></i>-->
                    <!--<div class="permission-text">管理您的 <strong>组织成员</strong></div>-->
                <!--</li>-->
                <li class="permission-item">
                    <i class="fas fa-key permission-icon"></i>
                    <div class="permission-text">管理您的 <strong>部署密钥</strong></div>
                </li>
                <li class="permission-item">
                    <i class="fas fa-envelope permission-icon"></i>
                    <div class="permission-text" th:text="'访问您的' + ${scope}">访问您的 <strong>电子邮件地址</strong></div>
                </li>
            </ul>

            <div th:each="sc : ${scope}">
                <input type="hidden" th:name="${'scope.' + sc}" value="true"/>
            </div>

            <!-- CSRF 保护 -->
            <!--<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">-->

            <div class="scope-info">
                <i class="fas fa-info-circle"></i>
                此应用程序将拥有这些权限，直到您撤销访问权限。
            </div>
        </div>

        <div class="action-section">
            <button class="btn btn-cancel" onclick="cancelAuth()">取消</button>
            <button class="btn btn-authorize" type="submit" th:text="'授权 ' + ${clientId}">授权 DevTools Pro</button>
            <!--<button class="btn btn-authorize" onclick="authApply()" th:text="'授权 ' + ${clientId}">授权 DevTools Pro</button>-->
        </div>
    </form>


    <div class="auth-footer">
        <p>授权后，您可以在 <a href="#">账户设置</a> 中管理应用程序的访问权限</p>
        <p style="margin-top: 8px;">通过授权，您将同意 DevTools Pro 的 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a></p>
    </div>
</div>

<script>

    // 授权
    function authApply() {
        const btn = this;
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 授权中...';
        btn.disabled = true;

        // 显示成功消息
        const successMsg = document.createElement('div');
        successMsg.innerHTML = '<i class="fas fa-check-circle"></i> 授权成功！正在重定向...';
        successMsg.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(46, 164, 79, 0.95);
                color: white;
                padding: 12px 24px;
                border-radius: 6px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                animation: fadeIn 0.3s ease;
                font-size: 14px;
            `;
        document.body.appendChild(successMsg);

        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
            successMsg.style.animation = 'fadeOut 0.5s ease forwards';
        }, 2000);
    }

    // 取消授权
    function cancelAuth() {
        if(confirm('确定要取消授权吗？')) {
            window.location.href = 'http://localhost:9092/base/login.html';
        }
    }

    // 添加动画样式
    const style = document.createElement('style');
    style.textContent = `
            @keyframes fadeIn {
                from { opacity: 0; top: 10px; }
                to { opacity: 1; top: 20px; }
            }

            @keyframes fadeOut {
                to { opacity: 0; top: 10px; }
            }
        `;
    document.head.appendChild(style);
</script>
</body>
</html>
